<!--
 * @Description: 题库列表页 -- questionbank
 * @Author: your name
 * @Date: 2023-12-21
 * @LastEditTime: 2023-12-21
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="heart_w" style="display: flex">
      <div class="questionbank">
        <div class="listBox">
          <div class="item" v-for="item in questions" :key="item.cid">
            <div class="section" @click="clickContent(item, item.cid)">
              <div class="left_t">
                <img
                  src="@/assets/images/testList.png"
                  alt=""
                  style="width: 18px; height: 14px"
                />
                <p>{{ item.name }}</p>
              </div>
              <div class="commonRight">
                <span>共（{{ item.t_num }}）题</span>
                <!-- <span class="correct">0%</span>
                <span class="gray">共69</span> -->
              </div>
            </div>

            <div class="innerChilds">
              <div
                class="testPaper section"
                v-for="item_t in second_level"
                :key="item_t.cid"
                v-show="item.item_val"
              >
                <div class="left_t">
                  <img src="@/assets/images/tip.png" alt="" />
                  <p>
                    {{ item_t.name }}
                  </p>
                </div>
                <div class="commonRight">
                  <span>总题数: {{ item_t.t_num }}道</span>
                  <!-- <span class="correct">0%</span>
                  <span class="gray">共69</span> -->
                  <el-button round size="mini" @click="startExercise">
                    开始做题
                  </el-button>
                  <!-- <el-button round size="mini">查看报告</el-button>
                  <el-button round size="mini">继续做题</el-button> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧导航栏 -->
      <div class="iconlist">
        <router-link to="/exam_practice/errorList">
          <i></i>
          <p>错题集</p>
        </router-link>
        <router-link to="/exam_practice/collectList">
          <i></i>
          <p>收藏夹</p>
        </router-link>
        <a href="javascript:void(0);">
          <i></i>
          <p>模拟考试</p>
        </a>
        <router-link to="/exam_practice/smartTest">
          <i></i>
          <p>智能组卷</p>
        </router-link>
        <a href="javascript:void(0);">
          <i></i>
          <p>返回</p>
        </a>
      </div>
    </div>

    <!-- Dialog 做题模式/ 练习模式 -->
    <el-dialog
      title="请选择做题模式"
      :visible.sync="centerDialogVisible"
      width="32%"
      center
    >
      <div class="clearBox">
        <a href="javascript:void(0);" @click="questionbank_Keycode(1)">
          <el-image
            src="https://www.rongyuejiaoyu.com/static/static/img/lianximoshi.1eabfc1.png"
          ></el-image>
          <h6>练习模式</h6>
          <p>解题思路随时查看</p>
        </a>
        <a href="javascript:void(0);" @click="questionbank_Keycode(0)">
          <el-image
            src="https://www.rongyuejiaoyu.com/static/static/img/ceshimoshi.764e30d.png"
          ></el-image>
          <h6>背题模式</h6>
          <p>解题思路随时查看</p>
        </a>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getchapterList, getChildQuestions } from '@/api/CFApractice.js'
export default {
  name: 'questionbank',
  data() {
    return {
      second_level: [], // 二级
      questions: [], // 一级
      centerDialogVisible: false
    }
  },
  created() {
    console.log(this.$route.path)
    console.log(this.$route.query.cid)
    localStorage.setItem('upcateid', this.$route.query.cid)
    this.getCFAData()
  },
  methods: {
    clickContent(el, id) {
      if (el.item_val == false) {
        this._itemsinit(id)
      }
      el.item_val = !el.item_val
    },
    async _itemsinit(cid) {
      const dataCache = new Map()
      let key = 'wares'
      // 手风琴模式
      this.questions.forEach((el, index) => {
        el.item_val = false
      })
      this.second_level = dataCache.get(key)
      const data_list = {
        cid: cid,
        token: this.$store.state.token
      }
      const { data: data } = await getChildQuestions(data_list)
      if (data.code == 1 && !this.second_level) {
        dataCache.set(key, data.data.list)
        this.second_level = dataCache.get(key)
        console.log(dataCache.get(key), '666666')
        return data.data.list
      } else {
        this.$message.error(data.msg)
      }
    },
    async getCFAData() {
      const dataCache = new Map()
      let key = 'wares'
      this.questions = dataCache.get(key)

      const chapter_data = {
        token: this.$store.state.token,
        cid: localStorage.getItem('upcateid')
      }
      console.log(chapter_data, '1111111111')
      const { data: data } = await getchapterList(chapter_data)
      // console.log(data.data.list, 'CFA题库列表')
      if (data.code == 1 && !this.questions) {
        const list = data.data.list.map((ele, index) => {
          if (ele.item_val) {
            ele.item_val = ele.item_val
          } else {
            ele.item_val = false
          }
          return ele
        })
        dataCache.set(key, list)
        this.questions = dataCache.get(key)
        console.log('0000000000', dataCache.get(key))
        return list
      } else {
        this.$message.error(data.msg)
      }
    },
    startExercise() {
      this.centerDialogVisible = true
    },
    questionbank_Keycode(id) {
      // 1.练习模式 2. 背题模式
      this.$router.push({
        path: '/exam_practice/CFA/Keycode',
        query: { cid: id }
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/frm_cfa.scss';
</style>
